This PR removes all usage of the deprecated sx prop from Timeline.dev.stories.tsx and migrates to CSS modules, as part of the ongoing effort to move away from styled-components.

Changes Made

Created Timeline.dev.stories.module.css

A new CSS module containing all the styles that were previously defined using sx props:

• Timeline margin-left styling (.TimelineWithMarginLeft)
• Timeline.Item padding styles (.TimelineItemWithPadding)
• Timeline.Badge background colors for different states (.TimelineBadgeCanvas, .TimelineBadgeDanger, .TimelineBadgeAccent)
• Timeline.Body text and flex layout styles (.TimelineBodySubtle, .TimelineBodyDefault)
• Timeline.Break border width styling (.TimelineBreakThick)

Updated Timeline.dev.stories.tsx

• Added imports for clsx and the CSS module
• Replaced all sx props with className using CSS module classes
• Used clsx to properly combine existing class names with new CSS module classes
• Preserved all existing inline styles and component functionality

Before vs After

Before (using sx props):

<Timeline sx={{ ml: 4 }}>
  <Timeline.Item sx={{ pt: 2, pb: 1 }}>
    <Timeline.Badge sx={{ backgroundColor: 'canvas.default' }}>

After (using CSS modules):

<Timeline className={classes.TimelineWithMarginLeft}>
  <Timeline.Item className={classes.TimelineItemWithPadding}>
    <Timeline.Badge className={classes.TimelineBadgeCanvas}>

Validation

• ✅ All existing tests pass
• ✅ Build succeeds without errors
• ✅ Story renders correctly in Storybook with all visual styling preserved
• ✅ ESLint and Stylelint pass
• ✅ No styled-components or sx prop usage remains

The Timeline Dev story continues to work exactly as before with all visual styling preserved, but now uses modern CSS modules instead of the deprecated sx prop system.

Fixes #6540.

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.